<template>

    <div :class="propJson.editFlag ? 'editContainer' : 'commonContainer'" :style="execPositionStyle" :info="execAffixShow">
        <div class="commonDiv" :style="execStyle" v-if="!propJson.editFlag && affixShowFlag" :info="getBadgeValue">
            <el-card shadow="hover" :body-style="execBodyClass" v-for="item in propJson.affixList" :key="item.buttonName" @click="affixClick(item)">
                <div style="text-align: center">
                    <el-badge :value="item.value" :is-dot="item.badgeIsBot" :max="item.badgeMaxNum"
                              :type="item.badgeType" v-if="item.isAddBadge">
                        <el-button :circle="true" :icon="item.buttonIcon" :size="item.buttonSize"></el-button>
                    </el-badge>
                    <el-button :circle="true" :icon="item.buttonIcon" :size="item.buttonSize" v-if="!item.isAddBadge"></el-button>
                </div>
                <div style="text-align: center">
                    <span :style="execAffixNameStyle" style="caret-color: transparent;">{{item.affixName}}</span>
                </div>
            </el-card>
        </div>

        <div class="editDiv" :style="execStyle" v-if="propJson.editFlag" :info="getBadgeValue">
            <el-card :body-style="execBodyClass" v-for="item in propJson.affixList" :key="item.buttonName">
                <div style="text-align: center">
                    <el-badge :value="item.value" :is-dot="item.badgeIsBot" :max="item.badgeMaxNum"
                              :type="item.badgeType" v-if="item.isAddBadge">
                        <el-button :circle="true" :icon="item.buttonIcon" :size="item.buttonSize"></el-button>
                    </el-badge>
                    <el-button :circle="true" :icon="item.buttonIcon" :size="item.buttonSize" v-if="!item.isAddBadge"></el-button>
                </div>
                <div style="text-align: center">
                    <span :style="execAffixNameStyle">{{item.affixName}}</span>
                </div>
            </el-card>
        </div>
    </div>

</template>

<script name="" setup lang="ts">
import {doThirdServiceAction, doThirdServiceValue} from "@/utils/lowcode/thirdService";
import {computed, defineProps, ref} from "vue";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let affixShowFlag = ref(true);

let execStyle = computed(() => {
    let style = "";
    style += "width: " + propJson.value.affixWidth + ";";
    return style;
})

let execAffixNameStyle = computed(() => {
    let style = "";
    style += "font-size: " + propJson.value.affixNameSize;
    return style;
})

let execPositionStyle = computed(() => {
    let style = "";
    if (propJson.value.positionType === 'rightBottom') {
        style += "right: " + propJson.value.positionRight + ";";
        style += "bottom: " + propJson.value.positionBottom + ";";
    } else if (propJson.value.positionType === 'rightTop') {
        style += "right: " + propJson.value.positionRight + ";";
        style += "top: " + propJson.value.positionTop + ";";
    } else if (propJson.value.positionType === 'leftBottom') {
        style += "left: " + propJson.value.positionLeft + ";";
        style += "bottom: " + propJson.value.positionBottom + ";";
    } else if (propJson.value.positionType === 'leftTop') {
        style += "left: " + propJson.value.positionLeft + ";";
        style += "top: " + propJson.value.positionTop + ";";
    }
    return style;
})

let execAffixShow = computed(async () => {
    if (propJson.value.editFlag) {
        return;
    }
    await doThirdServiceValue(propJson.value.affixShow, commonParam.value, execAffixShowThen, execAffixShowCatch, null)
})

let getBadgeValue = computed(async () => {
    if (propJson.value.editFlag) {
        return;
    }
    for (let index = 0; index < propJson.value.affixList.length; index++) {
        let item = propJson.value.affixList[index];
        await doThirdServiceValue(item.badgeValue, commonParam.value, execBadgeValueThen, execBadgeValueCatch, item)
    }
})

function execAffixShowThen(resValue) {
    if (typeof resValue === "string") {
        affixShowFlag.value = resValue === 'true';
    } else {
        affixShowFlag.value = !!resValue;
    }
}

function execAffixShowCatch(resValue) {

}

function execChangeThen(awaitObj) {

}

async function affixClick(item) {
    if (!item.affixAction) {
        return;
    }
    // 定义一个标志位，后续同步执行
    let awaitObj = {flag: false, res: true}
    await doThirdServiceAction(item.affixAction, awaitObj, commonParam.value, execChangeThen, ()=>{}, awaitObj);
}

function execBadgeValueThen(resValue, item) {
    item.value = resValue
}

function execBadgeValueCatch(resValue) {

}
</script>

<style scoped lang="less">
.commonContainer {
    position: fixed;
}

.editContainer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commonDiv:hover {
    cursor: pointer;
}

</style>